﻿@page "/components/listgroup"
<Pager Title="List Group" Description="List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within."
 Indicates="@(new[]{"Example","Active item","Disable item","Flush","Numbered","Horizontal","Colored"})"
>
		<Demo Title="Example">
		<Description>

		</Description>
		<Run>
			<ListGroup>
				<ListGroupItem>An item</ListGroupItem>
				<ListGroupItem>A second item</ListGroupItem>
				<ListGroupItem>A third item</ListGroupItem>
				<ListGroupItem>A fourth item</ListGroupItem>
				<ListGroupItem>And a fifth item</ListGroupItem>
			</ListGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<ListGroup>
	<ListGroupItem>An item</ListGroupItem>
	<ListGroupItem>A second item</ListGroupItem>
	<ListGroupItem>A third item</ListGroupItem>
	<ListGroupItem>A fourth item</ListGroupItem>
	<ListGroupItem>And a fifth item</ListGroupItem>
</ListGroup>
```
			")
		</Code>
	</Demo>
			<Demo Title="Active item">
		<Description>

		</Description>
		<Run>
			<ListGroup>
				<ListGroupItem Active>An item</ListGroupItem>
				<ListGroupItem>A second item</ListGroupItem>
				<ListGroupItem>A third item</ListGroupItem>
				<ListGroupItem>A fourth item</ListGroupItem>
				<ListGroupItem>And a fifth item</ListGroupItem>
			</ListGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<ListGroup>
	<ListGroupItem Active>An item</ListGroupItem>
	<ListGroupItem>A second item</ListGroupItem>
	<ListGroupItem>A third item</ListGroupItem>
	<ListGroupItem>A fourth item</ListGroupItem>
	<ListGroupItem>And a fifth item</ListGroupItem>
</ListGroup>
```
			")
		</Code>
	</Demo>
	<Demo Title="Disable item">
		<Description>

		</Description>
		<Run>
			<ListGroup>
				<ListGroupItem Disabled>An item</ListGroupItem>
				<ListGroupItem>A second item</ListGroupItem>
				<ListGroupItem>A third item</ListGroupItem>
				<ListGroupItem>A fourth item</ListGroupItem>
				<ListGroupItem>And a fifth item</ListGroupItem>
			</ListGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<ListGroup>
	<ListGroupItem Disabled>An item</ListGroupItem>
	<ListGroupItem>A second item</ListGroupItem>
	<ListGroupItem>A third item</ListGroupItem>
	<ListGroupItem>A fourth item</ListGroupItem>
	<ListGroupItem>And a fifth item</ListGroupItem>
</ListGroup>
```
			")
		</Code>
	</Demo>
	<Demo Title="Flush">
		<Description>
			Set <code>Flush</code> to remove some borders and rounded corners to render list group items edge-to-edge in a parent container
		</Description>
		<Run>
			<ListGroup Flush>
				<ListGroupItem>An item</ListGroupItem>
				<ListGroupItem>A second item</ListGroupItem>
				<ListGroupItem>A third item</ListGroupItem>
				<ListGroupItem>A fourth item</ListGroupItem>
				<ListGroupItem>And a fifth item</ListGroupItem>
			</ListGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<ListGroup Flush>
	<ListGroupItem>An item</ListGroupItem>
	<ListGroupItem>A second item</ListGroupItem>
	<ListGroupItem>A third item</ListGroupItem>
	<ListGroupItem>A fourth item</ListGroupItem>
	<ListGroupItem>And a fifth item</ListGroupItem>
</ListGroup>
```
			")
		</Code>
	</Demo>
	<Demo Title="Numbered">
		<Run>
			<ListGroup Numbered>
				<ListGroupItem>An item</ListGroupItem>
				<ListGroupItem>A second item</ListGroupItem>
				<ListGroupItem>A third item</ListGroupItem>
				<ListGroupItem>A fourth item</ListGroupItem>
				<ListGroupItem>And a fifth item</ListGroupItem>
			</ListGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<ListGroup Numbered>
	<ListGroupItem>An item</ListGroupItem>
	<ListGroupItem>A second item</ListGroupItem>
	<ListGroupItem>A third item</ListGroupItem>
	<ListGroupItem>A fourth item</ListGroupItem>
	<ListGroupItem>And a fifth item</ListGroupItem>
</ListGroup>
```
			")
		</Code>
	</Demo>
	<Demo Title="Horizontal">
		<Description>
			Set <code>Horizontal</code> to change the layout of list group items from vertical to horizontal across all breakpoints
		</Description>

		<Run>
			<ListGroup Horizontal>
				<ListGroupItem>An item</ListGroupItem>
				<ListGroupItem>A second item</ListGroupItem>
				<ListGroupItem>A third item</ListGroupItem>
				<ListGroupItem>A fourth item</ListGroupItem>
				<ListGroupItem>And a fifth item</ListGroupItem>
			</ListGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<ListGroup Horizontal>
	<ListGroupItem>An item</ListGroupItem>
	<ListGroupItem>A second item</ListGroupItem>
	<ListGroupItem>A third item</ListGroupItem>
	<ListGroupItem>A fourth item</ListGroupItem>
	<ListGroupItem>And a fifth item</ListGroupItem>
</ListGroup>
```
			")
		</Code>
	</Demo>
	<Demo Title="Colored">
		<Run>
			<ListGroup>
				<ListGroupItem>A simple default list group item</ListGroupItem>
				<ListGroupItem Color="Color.Primary">A simple primary list group item</ListGroupItem>
				<ListGroupItem Color="Color.Secondary">A simple secondary list group item</ListGroupItem>
				<ListGroupItem Color="Color.Info">A simple info list group item</ListGroupItem>
				<ListGroupItem Color="Color.Success">A simple success list group item</ListGroupItem>
				<ListGroupItem Color="Color.Warning">A simple warning list group item</ListGroupItem>
				<ListGroupItem Color="Color.Danger">A simple danger list group item</ListGroupItem>
				<ListGroupItem Color="Color.Light">A simple light list group item</ListGroupItem>
				<ListGroupItem Color="Color.Dark">A simple dark list group item</ListGroupItem>
			</ListGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<ListGroup>
	<ListGroupItem>A simple default list group item</ListGroupItem>
	<ListGroupItem Color=""Color.Primary"">A simple primary list group item</ListGroupItem>
	<ListGroupItem Color=""Color.Secondary"">A simple secondary list group item</ListGroupItem>
	<ListGroupItem Color=""Color.Info"">A simple info list group item</ListGroupItem>
	<ListGroupItem Color=""Color.Success"">A simple success list group item</ListGroupItem>
	<ListGroupItem Color=""Color.Warning"">A simple warning list group item</ListGroupItem>
	<ListGroupItem Color=""Color.Danger"">A simple danger list group item</ListGroupItem>
	<ListGroupItem Color=""Color.Light"">A simple light list group item</ListGroupItem>
	<ListGroupItem Color=""Color.Dark"">A simple dark list group item</ListGroupItem>
</ListGroup>
```
			")
		</Code>
	</Demo>
		<Demo>
			<Description>
				Set <code>Action</code> to indicate an active selection
			</Description>
		<Run>
			<ListGroup>
				<ListGroupItem Action>A simple default list group item</ListGroupItem>
				<ListGroupItem Color="Color.Primary" Action>A simple primary list group item</ListGroupItem>
				<ListGroupItem Color="Color.Secondary" Action>A simple secondary list group item</ListGroupItem>
				<ListGroupItem Color="Color.Info" Action>A simple info list group item</ListGroupItem>
				<ListGroupItem Color="Color.Success" Action>A simple success list group item</ListGroupItem>
				<ListGroupItem Color="Color.Warning" Action>A simple warning list group item</ListGroupItem>
				<ListGroupItem Color="Color.Danger" Action>A simple danger list group item</ListGroupItem>
				<ListGroupItem Color="Color.Light" Action>A simple light list group item</ListGroupItem>
				<ListGroupItem Color="Color.Dark" Action>A simple dark list group item</ListGroupItem>
			</ListGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<ListGroup>
	<ListGroupItem Action>A simple default list group item</ListGroupItem>
	<ListGroupItem Color=""Color.Primary"" Action>A simple primary list group item</ListGroupItem>
	<ListGroupItem Color=""Color.Secondary"" Action>A simple secondary list group item</ListGroupItem>
	<ListGroupItem Color=""Color.Info"" Action>A simple info list group item</ListGroupItem>
	<ListGroupItem Color=""Color.Success"" Action>A simple success list group item</ListGroupItem>
	<ListGroupItem Color=""Color.Warning"" Action>A simple warning list group item</ListGroupItem>
	<ListGroupItem Color=""Color.Danger"" Action>A simple danger list group item</ListGroupItem>
	<ListGroupItem Color=""Color.Light"" Action>A simple light list group item</ListGroupItem>
	<ListGroupItem Color=""Color.Dark"" Action>A simple dark list group item</ListGroupItem>
</ListGroup>
```
			")
		</Code>
	</Demo>
</Pager>